<template>
  <div class="parent">
    <div class="storage-box">
      <div class="title d-flex ai-center mb-40">
        <div class="divider"></div>
        {{ $t("storage.cunchushezhi") }}
      </div>
      <div class="progress-wrapper ml-30">
        <el-progress
          :percentage="percentage"
          color="#1abc9c"
          define-back-color="#8cddcd"
          :stroke-width="12"
        ></el-progress>
        <div class="max_storage">
          {{ $t("storage.totalRongliang") + " ( MB ) : " }}
          <span class="number">{{
            util.formatNumberWithCommas(storageInfo.max_storage)
          }}</span>
        </div>
        <div class="rest_storage">
          {{ $t("storage.rest") + " ( MB ) : "
          }}<span class="number">{{
            util.formatNumberWithCommas(resetStorage)
          }}</span>
        </div>
      </div>
    </div>
    <div class="storage-box">
      <div class="title">
        <div class="divider"></div>
        {{ $t("storage.plan") }}
      </div>
      <el-form class="form" :model="formData" label-width="200px">
        <el-form-item :label="$t('storage.strategy') + ':'">
          <el-select v-model="formData.storage_strategy">
            <el-option
              v-for="item in storage_strategy_list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <MyButton class="confirm ml-10" @click="handleSetStorageStrange">{{
            $t("common.confirm")
          }}</MyButton>
        </el-form-item>
        <el-form-item :label="$t('storage.clearREcord') + ':'">
          <MyButton class="confirm" @click="handleClearRecords">{{
            $t("common.confirm")
          }}</MyButton>
        </el-form-item>
      </el-form>
    </div>
    <div class="storage-box">
      <div class="title">
        <div class="divider"></div>
        {{ $t("storage.mode") }}
      </div>
      <el-form class="form" :model="formData2" label-width="200px">
        <el-form-item :label="$t('storage.faceLib') + ':'">
          <el-tooltip class="item" effect="light" placement="top-start">
            <div slot="content">
              {{ $t("storage.tip1") }}
              <br />
              {{ $t("storage.tip2") }}
            </div>
            <el-icon class="el-icon-question mr-10" />
          </el-tooltip>
          <el-select v-model="formData2.face">
            <el-option
              v-for="item in face_list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <MyButton class="confirm ml-10" @click="handleSaveFace">{{
            $t("common.confirm")
          }}</MyButton>
        </el-form-item>
        <el-form-item :label="$t('storage.faceAndAlarm') + ':'">
          <el-tooltip class="item" effect="light" placement="top-start">
            <div slot="content">
              {{ $t("storage.tip3") }}
              <br />
              {{ $t("storage.tip4") }}
            </div>
            <el-icon class="el-icon-question mr-10" />
          </el-tooltip>
          <el-select v-model="formData2.capture">
            <el-option
              v-for="item in capture_list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <MyButton class="confirm ml-10" @click="handleSaveCapture">{{
            $t("common.confirm")
          }}</MyButton>
        </el-form-item>
      </el-form>
    </div>
    <div class="storage-box">
      <div class="title">
        <div class="divider"></div>
        {{ $t("storage.qixian") }}
      </div>
      <el-form class="form" label-width="200px">
        <el-form-item :label="$t('storage.faceStorage') + ':'">
          <el-tooltip class="item" effect="light" placement="top-start">
            <div slot="content">
              {{ $t("storage.tip5") }}
            </div>
            <el-icon class="el-icon-question mr-10" />
          </el-tooltip>
          <el-select
            v-model="formData3.saved_time"
            :disabled="formData2.face === '0'"
          >
            <el-option
              v-for="item in face_time_list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <MyButton class="confirm ml-10" @click="handleSaveStorageLibTime">{{
            $t("common.confirm")
          }}</MyButton>
        </el-form-item>
        <el-form-item :label="$t('storage.faceAndAlarm') + ':'">
          <el-tooltip class="item" effect="light" placement="top-start">
            <div slot="content">
              {{ $t("storage.tip6") }}
            </div>
            <el-icon class="el-icon-question mr-10" />
          </el-tooltip>
          <el-select
            v-model="formData4.saved_time"
            :disabled="formData2.capture === '00'"
          >
            <el-option
              v-for="item in capture_time_list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <MyButton class="confirm ml-10" @click="handleSaveStorageFaceTime">{{
            $t("common.confirm")
          }}</MyButton>
        </el-form-item>
      </el-form>
    </div>
    <div class="storage-box">
      <div class="title">
        <div class="divider"></div>
        {{ $t("storage.displayMode") }}
      </div>
      <el-form class="form" :model="formData5" label-width="200px">
        <el-form-item :label="$t('storage.displayMode') + ':'">
          <el-tooltip class="item" effect="light" placement="top-start">
            <div slot="content">
              {{ $t("storage.tip7") }}
              <br />
              {{ $t("storage.tip8") }}
              <br />
              {{ $t("storage.tip9") }}
            </div>
            <el-icon class="el-icon-question mr-10" />
          </el-tooltip>
          <el-select v-model="formData5.right_value">
            <el-option
              v-for="item in right_list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <MyButton class="confirm ml-10" @click="handleSaveRight">{{
            $t("common.confirm")
          }}</MyButton>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {
  getStorage,
  setStorageStrange,
  getStorageTime,
  saveStorageTime,
  getStorageConfig,
  saveStorageConfig,
  getRightValue,
  setRightValue,
} from "./service";
import MyButton from "@/components/Button.vue";
import util from "@/utils";
export default {
  components: { MyButton },
  data() {
    return {
      util,
      storageInfo: {},
      formData: {},
      formData2: {},
      formData3: {},
      formData4: {},
      formData5: {},
      storage_strategy_list: [
        { label: this.$t("storage.manfugai"), value: 1 },
        { label: this.$t("storage.manjiting"), value: 2 },
      ],
      face_list: [
        { label: this.$t("storage.face1"), value: "0" },
        { label: this.$t("storage.face2"), value: "1" },
      ],
      face_time_list: [
        { label: this.$t("storage.forever"), value: 0 },
        { label: "90" + this.$t("storage.day"), value: 90 },
        { label: "180" + this.$t("storage.day"), value: 180 },
      ],
      capture_time_list: [
        { label: this.$t("storage.forever"), value: 0 },
        { label: "3" + this.$t("storage.day"), value: 3 },
        { label: "7" + this.$t("storage.day"), value: 7 },
        { label: "15" + this.$t("storage.day"), value: 15 },
        { label: "30" + this.$t("storage.day"), value: 330 },
      ],
      right_list: [
        { label: this.$t("soureImage"), value: 1 },
        { label: this.$t("outFigure"), value: 0 },
      ],
      capture_list: [
        { label: this.$t("storage.face3"), value: "00" },
        { label: this.$t("storage.face4"), value: "11" },
      ],
    };
  },
  computed: {
    resetStorage() {
      return this.storageInfo.max_storage - this.storageInfo.cur_storage;
    },
    percentage() {
      return (
        Math.round(this.storageInfo.cur_storage / this.storageInfo.max_storage * 100)
      );
    },
    user_name() {
      return this.$store.state.user_name;
    },
  },
  created() {
    this.getStorage();
    this.getStorageTime1();
    this.getStorageTime2();
    this.getStorageConfig();
    this.getRightValue();
  },
  methods: {
    handleSaveFace() {
      util.confirm(
        this.$t("hint"),
        this.$t("cap_conform_warn"),
        this.$t("makeSure"),
        this.$t("cancel"),
        async () => {
          const params = { face: this.formData2.face };
          const res = await saveStorageConfig(params);
          if (res.code == 0) {
            util.msg.success("edit_success");
          }
        }
      );
    },
    handleSaveCapture() {
      util.confirm(
        this.$t("hint"),
        this.$t("cap_alarm_warn1"),
        this.$t("makeSure"),
        this.$t("cancel"),
        async () => {
          const params = { capture: this.formData2.capture };
          const res = await saveStorageConfig(params);
          if (res.code == 0) {
            util.msg.success("edit_success");
          }
        }
      );
    },
    async handleSaveStorageLibTime() {
      const params = {
        store_obj: 1,
        ...this.formData3,
      };
      const res = await saveStorageTime(params);
      if (res.code === 0) {
        util.msg.success("edit_success");
      }
    },
    async handleSaveStorageFaceTime() {
      util.confirm(
        this.$t("hint"),
        this.$t("time_pass_warn"),
        this.$t("makeSure"),
        this.$t("cancel"),
        async () => {
          const params = {
            store_obj: 33,
            ...this.formData4,
          };
          const res = await saveStorageTime(params);
          if (res.code == 0) {
            util.msg.success("edit_success");
          }
        }
      );
    },
    async handleSaveRight() {
      util.confirm(
        this.$t("hint"),
        this.$t("show_mode_warn1"),
        this.$t("makeSure"),
        this.$t("cancel"),
        async () => {
          const params = {
            ...this.formData5,
          };
          const res = await setRightValue(params);
          if (res.code == 0) {
            util.msg.success("edit_success");
          }
        }
      );
    },
    async handleSetStorageStrange() {
      const res = await setStorageStrange(this.formData);
      if (res.code === 0) {
        util.msg.success("edit_success");
      }
    },
    async getRightValue() {
      const params = {
        right_item: 1,
        user_name: this.user_name,
      };
      let res = await getRightValue(params);
      this.$set(this, "formData5", res.data);
    },
    async getStorageConfig() {
      let res = await getStorageConfig();
      this.$set(this, "formData2", res.data);
    },
    async getStorageTime1() {
      let params = {
        store_obj: 1,
      };
      let res = await getStorageTime(params);
      this.$set(this.formData3, "saved_time", res.data.saved_time);
    },
    async getStorageTime2() {
      let params = {
        store_obj: 33,
      };
      let res = await getStorageTime(params);
      this.$set(this.formData4, "saved_time", res.data.saved_time);
    },
    async getStorage() {
      const res = await getStorage();
      this.$set(this, "storageInfo", res.data);
      this.$set(this.formData, "storage_strategy", res.data.storage_strategy);
    },
    handleClearRecords() {
      util.confirm(
        this.$t("storage.clearREcord"),
        this.$t("storage.promit1"),
        null,
        null,
        () => {
          // 掉清空接口,后续补上
          util.msg.success("clear_success");
        }
      );
    },
  },
};
</script>

<style lang="less" scoped>
.parent {
  font-size: 14px;
  height: 100%;
  background: #e8ebf0;
  border-radius: 8px;
  overflow: auto;
  .storage-box {
    background: #fff;
    border-radius: 8px;
    margin-bottom: 20px;
    padding: 0 20px 20px;
    height: 180px;
  }
  /deep/ .el-select {
    width: 360px;
  }
  .progress-wrapper {
    position: relative;
    width: 800px;
    .max_storage {
      position: absolute;
      left: 0;
      top: 30px;
    }
    .rest_storage {
      position: absolute;
      right: 0;
      top: 30px;
    }
    .number {
      color: rgba(26, 188, 156, 1);
    }
  }
  .title {
    display: flex;
    align-items: center;
    width: 100%;
    height: 56px;
    line-height: 56px;
    position: relative;
    background-image: linear-gradient(
      180deg,
      rgba(255, 255, 255, 1) 0,
      rgba(247, 248, 250, 1) 100%
    );
    font-size: 20px;
    .divider {
      background-image: linear-gradient(
        180deg,
        rgba(45, 204, 112, 1) 0,
        rgba(52, 152, 219, 1) 100%
      );
      border-radius: 4px;
      width: 4px;
      height: 20px;
      margin-right: 10px;
    }
  }
}
</style>
